import React, { Component } from 'react';
import v from 'assets/images/base.png'
import { get } from 'utils/http'
import { VipWrap } from './styledIndex'

class Vip extends Component {
    state = ({
        vipList: [],
        disList: []
    })

    async componentDidMount() {
        let result = await get({
            url: '/api/vip/index/getVipHomeSchedular?version=6.0.9&referer=2'
        })

        this.setState({
            vipList: result.data.exclusiveList.list,
            disList: result.data.discountList
        })
    }

    render() {
        return (
            <VipWrap>
                <header>
                    <div>
                        <span><img src={v} alt=""/></span>
                        <span>VIP+会员尊享权益</span>
                    </div>
                    <div>
                        <span>99元/年&nbsp;></span>
                    </div>
                </header>
                <div className="middle">
                    <div>
                        <h3>
                            <span>专属票价</span>
                            <span>time&nbsp;></span>
                        </h3>
                        <div className="pic">
                            {
                                this.state.vipList.length && (
                                    this.state.vipList.map( (value,index) => (
                                        <figure key={index}>
                                            <img src={value.pic} alt={value.schedular_name}/>
                                            <figcaption>
                                                <span>￥{value.fixed_price}</span>
                                                <del>￥{value.price}</del>
                                            </figcaption>
                                        </figure>
                                    ) )
                                )
                            }
                        </div>
                    </div>
                    <div>
                        <h3>
                            <span>专享折扣</span>
                            <span>></span>
                        </h3>
                        <div className="dis">
                            {
                                this.state.disList.length && (
                                    this.state.disList.slice(0,1).map( (value,index) => (
                                        <figure key={index}>
                                            <img src={value.pic} alt={value.schedular_name}/>
                                            <figcaption>
                                                <span>{value.min_discount}</span>
                                                <span>折</span>
                                            </figcaption>
                                        </figure>
                                    ) )
                                )
                            }
                        </div>
                    </div>
                </div>
            </VipWrap>
        );
    }
}

export default Vip;